import React, { PureComponent,Fragment } from 'react';
import { Form, Input, Select, Modal, Icon, Upload, Button, message } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
class CustomizedForm extends PureComponent {
  constructor(props) {
    super(props);
    this.state={
      fileList:[],
      status:""
    }
  }
  static getDerivedStateFromProps(nextProps, prevState){
    if (nextProps.modalValues && Object.keys(nextProps.modalValues).length ){//修改
      let fileList = [{
        uid: '-1',
        name: nextProps.modalValues.path,
        status: 'done',
      }]
      if (prevState.fileList.length && prevState.fileList[0].uid !== "-1"){//说明重新上传了
        fileList = [{
          uid: prevState.fileList[0].uid,
          name: prevState.fileList[0].name,
          status: 'done',
        }]
        
      }
      if (prevState.status == "removed"){//删除
        fileList=[]        
      }

      return  {fileList}
    }

    return null;
  }
  
  okHandle = () => {
    const { form, handleSubmit, modalValues } = this.props;
    const { status} = this.state;
    if (status == "removed"){
      form.setFieldsValue({
        path: ""
      });
    }
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      if (fieldsValue.path && typeof fieldsValue.path == "object"){
        fieldsValue.path = fieldsValue.path.file.response.packagePath
      }
      if (modalValues && Object.keys(modalValues).length){
        fieldsValue.id = modalValues.id
      }
      this.setState({
        fileList: [],
        status: ""
      }) 
      form.resetFields();
      handleSubmit(fieldsValue);
    });
  };
  cancelHandel=()=>{
    const { handleModalVisible } = this.props;
    this.setState({
      fileList: [],
      status: ""
    }) 
    handleModalVisible()
  }
  render() {
    const { modalVisible, modalValues, handleModalVisible, form } = this.props;
    const uploadParam ={
      name:"file",
      action:"http://39.104.84.146:8030/obdUpdate/uploadPackage",
      accept:".txt",
      onChange:(info)=> {
        if (info.file.status !== 'done') {
          this.setState({
            status: info.file.status
          })
        }
        // message.success(`${prevState.fileList[0].name} 上传成功！`);
        if (info.file.status === 'error') {
          message.error(`${info.file.name} 上传失败！`);
        }
        
        let fileList = info.fileList;
        fileList = fileList.slice(-1);
        
        this.setState({ fileList });
        
      },
    };
    return (
      <Modal
        destroyOnClose //关闭时销毁 Modal 里的子元素
        maskClosable={false}
        title={Object.keys(modalValues).length ? '修改远程升级包' : '添加远程升级包'}
        visible={modalVisible}
        onOk={this.okHandle}
        onCancel={this.cancelHandel}
      >
        <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="升级包名称">
          {form.getFieldDecorator('packageName', {
            rules: [{ required: true, message: '请输入升级包名称' }],
            initialValue: modalValues.packageName || '',
          })(<Input placeholder="请输入" autoComplete="off" />)}
        </FormItem>
        <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="升级包路径">
          {form.getFieldDecorator('path', {
            rules: [{ required: true, message: '请上传升级包' }],
            initialValue: modalValues.path || ""
          })(
            <Upload {...uploadParam} fileList={this.state.fileList}>
              <Button>
                <Icon type="upload" /> 点击上传升级包
              </Button>
            </Upload>
          )}
        </FormItem>
        <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="升级包版本号">
          {form.getFieldDecorator('version', {
            rules: [{ required: true, message: '请输入升级包版本号' }],
            initialValue: modalValues.version || '',
          })(<Input placeholder="请输入" />)}
        </FormItem>
        <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="升级包描述">
          {form.getFieldDecorator('remark', {
            rules: [{ required: true, message: '请输入至少五个字符的升级包描述！', min: 5 }],
            initialValue: modalValues.remark || '',
          })(<Input.TextArea rows={4} placeholder="请输入至少五个字符" />)}
        </FormItem>
      </Modal>
    );
  }
}
const CreateForm = Form.create()(CustomizedForm);

export default CreateForm;
